<template>
  <div class="address-main">
    <el-card shadow="never" class="card">
      <div slot="header">
        <el-button type="primary" size="small" @click="addAddress"
          >新增</el-button
        >
      </div>
      <el-table v-loading="loading" :data="addressList" border>
        <el-table-column
          fixed="left"
          type="index"
          label="#"
          width="50"
          align="center"
        />
        <el-table-column
          prop="addressName"
          label="地址名称"
          width="200"
          align="center"
        />
        <el-table-column label="默认发货地址" width="200" align="center">
          <template slot-scope="scope">
            默认发货地址:<el-switch
              v-model="scope.row.sendStatus"
              :active-value="1"
              :inactive-value="0"
              @change="switchStatus('sendStatus', scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="收货人姓名"
          width="150"
          align="center"
        />
        <el-table-column
          prop="phone"
          label="收货人电话"
          width="150"
          align="center"
        />
        <el-table-column prop="phone" label="收货人地址" align="center">
          <template slot-scope="scope">
            <p>
              {{ scope.row.province }}
              {{ scope.row.city }}
              {{ scope.row.region }}
            </p>
            <p>
              {{ scope.row.detailAddress }}
            </p>
          </template>
        </el-table-column>
        <el-table-column label="默认收货地址" width="200" align="center">
          <template slot-scope="scope">
            默认收货地址:<el-switch
              v-model="scope.row.receiveStatus"
              :active-value="1"
              :inactive-value="0"
              @change="switchStatus('receiveStatus', scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="200"
          align="center"
        />
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="goEdit(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="goDelete(scope.row)"
              ><span style="color: red">删除</span></el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <AddressDetail ref="AddressDetail" @success="addSuccess" />
  </div>
</template>

<script>
import addressApi from '@/api/order/address'
import AddressDetail from './detail/index'
export default {
  name: 'AddressList',
  components: {
    AddressDetail
  },
  data() {
    return {
      loading: false,
      addressList: []
    }
  },

  created() {
    this.getAddressList()
  },
  mounted() {},
  methods: {
    addSuccess() {
      this.getAddressList()
    },
    // 修改状态
    switchStatus(statusName, row) {
      var switchApi =
        statusName === 'receiveStatus' ? 'setReceiveOne' : 'setSendOne'
      // 暂存原来的状态
      var tempStatus = row[statusName] === 0 ? 1 : 0
      var params = {}
      params[statusName] = row[statusName]
      params.id = row.id
      addressApi[switchApi](params).then((res) => {
        if (res.success) {
          this.$message.success('修改状态成功')
          this.getAddressList()
        } else {
          // 重置switch 变回原来的状态
          row[statusName] = tempStatus
          this.$message.error('修改状态失败')
        }
      })
    },
    // 新增地址
    addAddress() {
      this.$refs.AddressDetail.openAddressDetail()
      // console.log('addaddress')
    },
    // 获取地址列表
    getAddressList() {
      this.loading = true
      addressApi.getAddressList().then((res) => {
        if (res.success) {
          this.addressList = res.data.items
        } else {
          this.$message.warning('请求失败')
        }
        this.loading = false
      })
    },
    // 编辑
    goEdit(row) {
      // 路由跳转
      this.$refs.AddressDetail.openAddressDetail(row.id)
    },
    // 删除
    goDelete(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          addressApi
            .deleteAddress(row.id)
            .then((res) => {
              if (res.success) {
                this.getAddressList()
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
              } else {
                this.$message.error(res.message)
              }
            })
            .catch((res) => {
              this.$message.error(res.message)
            })
        })
        .catch((rej) => {
          console.log(rej)
        })
    }
  }
}
</script>

<style scoped lang="scss">
.address-main {
  .card {
    margin: 30px;
  }
}
</style>